<template>
  <BasicModal
    :canFullscreen="false"
    @cancel="handleCancel"
    v-bind="$attrs"
    @register="registerModal"
    :title="`${title}列表`"
  >
    <div class="container">
      <BasicForm @register="registerForm" />
    </div>
    <template #footer>
      <a-button @click="handleCancel">关闭</a-button>
      <a-button type="primary" @click="handleSubmit">保存</a-button>
    </template>
  </BasicModal>
</template>
<script lang="ts" setup name="ModalDemo">
  import { ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { useMessage } from '/@/hooks/web/useMessage';

  const emit = defineEmits(['submit']);
  const { createMessage } = useMessage();

  const title = ref('');
  const [registerModal, { closeModal }] = useModalInner(async (data) => {
    //传进来的参数
    title.value = data;
    updateSchema([
      { field: 'id', label: `${title.value}ID` },
      { field: 'name', label: `${title.value}名称` },
    ]);
  });

  const schemas: FormSchema[] = [
    {
      field: 'id',
      component: 'Input',
      label: `消息ID`,
      rules: [{ required: true }],
      colProps: {
        span: 24,
      },
    },
    {
      field: 'name',
      component: 'Input',
      label: `消息名称`,
      rules: [{ required: true }],
      colProps: {
        span: 24,
      },
    },
  ];
  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
  const [registerForm, { validate, updateSchema, resetFields }] = useForm({
    labelWidth: 100,
    schemas: schemas,
    showActionButtonGroup: false,
  });
  async function handleSubmit() {
    const values = await validate();
    const params = Object.assign({}, values);
    createMessage.success('操作成功');
    emit('submit', params, title.value);
    handleCancel();
  }
  function handleCancel() {
    resetFields();
    closeModal();
  }
</script>
<style lang="less" scoped></style>
